// 响应式工具类（H5 / APP 通用）

export const BREAKPOINTS = {
  XS: 480,
  SM: 768,
  MD: 1024,
  LG: 1200,
  XL: 1440
}

export const DEVICE_TYPES = {
  MOBILE: 'mobile',
  TABLET: 'tablet',
  DESKTOP: 'desktop'
}

export function getScreenWidth() {
  // #ifdef H5
  return window.innerWidth
  // #endif
  // #ifdef APP-PLUS
  return uni.getSystemInfoSync().screenWidth
  // #endif
  // #ifdef MP-WEIXIN
  return uni.getSystemInfoSync().screenWidth
  // #endif
  return 375
}

export function getScreenHeight() {
  // #ifdef H5
  return window.innerHeight
  // #endif
  // #ifdef APP-PLUS
  return uni.getSystemInfoSync().screenHeight
  // #endif
  // #ifdef MP-WEIXIN
  return uni.getSystemInfoSync().screenHeight
  // #endif
  return 667
}

export function isMobile() {
  const width = getScreenWidth()
  return width <= BREAKPOINTS.SM
}

export function isTablet() {
  const width = getScreenWidth()
  return width > BREAKPOINTS.SM && width <= BREAKPOINTS.MD
}

export function isDesktop() {
  const width = getScreenWidth()
  return width > BREAKPOINTS.MD
}

export function getDeviceType() {
  if (isMobile()) return DEVICE_TYPES.MOBILE
  if (isTablet()) return DEVICE_TYPES.TABLET
  return DEVICE_TYPES.DESKTOP
}

export function isLandscape() {
  const width = getScreenWidth()
  const height = getScreenHeight()
  return width > height
}

export function isPortrait() {
  return !isLandscape()
}

export function getSafeArea() {
  // #ifdef H5
  return { top: 0, bottom: 0, left: 0, right: 0 }
  // #endif
  // #ifdef APP-PLUS
  const sys = uni.getSystemInfoSync()
  return {
    top: sys.safeAreaInsets?.top || 0,
    bottom: sys.safeAreaInsets?.bottom || 0,
    left: sys.safeAreaInsets?.left || 0,
    right: sys.safeAreaInsets?.right || 0
  }
  // #endif
  // #ifdef MP-WEIXIN
  const wxSys = uni.getSystemInfoSync()
  return {
    top: wxSys.safeAreaInsets?.top || 0,
    bottom: wxSys.safeAreaInsets?.bottom || 0,
    left: wxSys.safeAreaInsets?.left || 0,
    right: wxSys.safeAreaInsets?.right || 0
  }
  // #endif
}

export function responsiveSpacing(base, mobile, tablet, desktop) {
  const deviceType = getDeviceType()
  switch (deviceType) {
    case DEVICE_TYPES.MOBILE:
      return `${mobile}rpx`
    case DEVICE_TYPES.TABLET:
      return `${tablet}rpx`
    case DEVICE_TYPES.DESKTOP:
      return `${desktop}rpx`
    default:
      return `${base}rpx`
  }
}

export function responsiveFontSize(base, mobile, tablet, desktop) {
  const deviceType = getDeviceType()
  switch (deviceType) {
    case DEVICE_TYPES.MOBILE:
      return `${mobile}rpx`
    case DEVICE_TYPES.TABLET:
      return `${tablet}rpx`
    case DEVICE_TYPES.DESKTOP:
      return `${desktop}rpx`
    default:
      return `${base}rpx`
  }
}

export function responsiveContainerWidth(type = 'md') {
  const deviceType = getDeviceType()
  if (deviceType === DEVICE_TYPES.MOBILE) return '100%'
  const containerWidths = {
    sm: '540px',
    md: '720px',
    lg: '960px',
    xl: '1140px',
    fluid: '100%'
  }
  return containerWidths[type] || containerWidths.md
}

export function onScreenResize(callback) {
  // #ifdef H5
  const handleResize = () => {
    callback({
      width: window.innerWidth,
      height: window.innerHeight,
      deviceType: getDeviceType(),
      isLandscape: isLandscape()
    })
  }
  window.addEventListener('resize', handleResize)
  return () => window.removeEventListener('resize', handleResize)
  // #endif
  // #ifndef H5
  return () => {}
  // #endif
}

export function getResponsiveClass(baseClass, responsiveClasses = {}) {
  const deviceType = getDeviceType()
  const responsiveClass = responsiveClasses[deviceType] || ''
  return `${baseClass} ${responsiveClass}`.trim()
}

export function responsiveImageSize(baseWidth, baseHeight) {
  const deviceType = getDeviceType()
  const scale = deviceType === DEVICE_TYPES.MOBILE ? 0.8 : deviceType === DEVICE_TYPES.TABLET ? 0.9 : 1
  return { width: Math.round(baseWidth * scale), height: Math.round(baseHeight * scale) }
}

export function isHighDPI() {
  // #ifdef H5
  return window.devicePixelRatio >= 2
  // #endif
  // #ifndef H5
  return false
  // #endif
}

export function isTouchDevice() {
  // #ifdef H5
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
  // #endif
  // #ifndef H5
  return true
  // #endif
}

export function getResponsiveConfig() {
  return {
    breakpoints: BREAKPOINTS,
    deviceType: getDeviceType(),
    isMobile: isMobile(),
    isTablet: isTablet(),
    isDesktop: isDesktop(),
    isLandscape: isLandscape(),
    isPortrait: isPortrait(),
    isHighDPI: isHighDPI(),
    isTouchDevice: isTouchDevice(),
    screenWidth: getScreenWidth(),
    screenHeight: getScreenHeight(),
    safeArea: getSafeArea()
  }
}

export default {
  BREAKPOINTS,
  DEVICE_TYPES,
  getScreenWidth,
  getScreenHeight,
  isMobile,
  isTablet,
  isDesktop,
  getDeviceType,
  isLandscape,
  isPortrait,
  getSafeArea,
  responsiveSpacing,
  responsiveFontSize,
  responsiveContainerWidth,
  onScreenResize,
  getResponsiveClass,
  responsiveImageSize,
  isHighDPI,
  isTouchDevice,
  getResponsiveConfig
} 